<template>
    <div class="talentPersonnel">
        <!--top-->
        <!--待入职时，用户点击查看，隐藏时间选择器和姓名电话-->
        <div class="title">服务管理-人才确认入职</div>
        <div style="background-color:#fff;padding-top:15px">
        <div class="lPersonTop">
            <div class="lPersonTop_box">
                <span style="font-size:20px;margin-bottom:20px">行星轮武汉公司</span>
                <span style="margin-left:10px">王小姐</span>
                <span>18672147325</span>
                <div class="lPerson">   
                    <!-- <button>沟通</button> -->
                    <img src="../../assets/imgs/duih.png"   />
                </div>
            </div>
            <div class="lPersonTop_box">
                <divstyle>职位名称</divstyle>
                <div class="lselect" style="margin:0 10px">
                    <el-select v-model="value" size="mini" placeholder="人才姓名">
                        <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <div class="lPerson">
                    <span style="margin-right:10px">18672147325</span>
                    <!-- <button>沟通</button> -->
                    <img src="../../assets/imgs/duih.png"   />
                </div>
            </div>
        </div>
        <!--人才选择入职时间,时间选择器-->
        <div class="lpicker">
            <div class="block">
                <!--<span class="demonstration">入职时间</span>-->
                <el-date-picker
                        v-model="value1"
                        type="date"
                        placeholder="请选择入职时间">
                </el-date-picker>
                <el-button type="primary">确认</el-button>
            </div>
        </div>
        <!--简历信息-->
        <div class="lresume">
            <span>附件简历</span>
            <!-- <span>简历信息</span> -->
        <div class="tab-container resume" >
            <div class="flex-box user">
                <div class="avatar">
                    <img width="100" height="100" src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3249712317,2640666993&fm=27&gp=0.jpg" alt="">
                </div>
                <div>
                    <div class="flex-box ">
                        <h3>张小凡</h3>
                        <p>离职，正在找工作</p>
                    </div>
                    <div class="flex-box base">
                        <div class="flex-box">
                            <i class="icon"></i>
                            <p>25岁</p>
                        </div>
                        <div class="flex-box">
                            <i class="icon"></i>
                            <p>5年经验</p>
                        </div>
                        <div class="flex-box">
                            <i class="icon"></i>
                            <p>武汉</p>
                        </div>
                        <div class="flex-box">
                            <i class="icon"></i>
                            <p>10W/2年</p>
                        </div>
                    </div>
                    <div class="flex-box base2">
                        <div class="flex-box">
                            <i class="icon"></i>
                            <p>10W/2年</p>
                        </div>
                        <div class="flex-box">
                            <i class="icon"></i>
                            <p>10W/2年</p>
                        </div>
                    </div>
                </div>
                
            </div>
            <div class="job" style="margin-bottom:30px; margin-top:60px">
                <div class="flex-box">
                    <h3>期望职位</h3><span class="margin-l">必填</span>
                </div>
                <div class="flex-box">
                    <div class="flex-box">
                        <i class="icon"></i>
                        <p>武汉</p>
                    </div>
                    <div class="flex-box">
                        <i class="icon"></i>
                        <p>执业类型</p>
                    </div>
                    <div class="flex-box">
                        <i class="icon"></i>
                        <p>企业类型</p>
                    </div>
                    <div class="flex-box">
                        <i class="icon"></i>
                        <p>10W/2年</p>
                    </div>
                </div>
            </div>
            <div class="work" >
                <div class="flex-box" style="margin-bottom:30px">
                    <h3>工作经历</h3><span class="margin-l">必填</span>
                </div>
                <div class="work-detail">
                    <div class="flex-box"><h3>公司名称</h3><span class="margin-l">2018-09-33</span></div>
                    <div class="flex-box">
                        <p>武汉</p>
                        <p>执业类型</p>
                        <p>企业类型</p>
                        <p>10W/2年</p>
                    </div>
                    <ul>
                        <li>
                            1.执业类型执业类型执业类型执业类型执业类型执业类型执业类型执业类型执业类型执业类型执业类型执业类型执业类型
                        </li>
                        <li>
                            1.执业类型执业类型执业类型执业类型执业类型执业类型执业类型执业类型执业类型执业类型执业类型执业类型执业类型
                        </li>
                        <li>
                            1.执业类型执业类型执业类型执业类型执业类型执业类型执业类型执业类型执业类型执业类型执业类型执业类型执业类型
                        </li>
                        <li>
                            1.执业类型执业类型执业类型执业类型执业类型执业类型执业类型执业类型执业类型执业类型执业类型执业类型执业类型
                        </li>
                        <li>
                            1.执业类型执业类型执业类型执业类型执业类型执业类型执业类型执业类型执业类型执业类型执业类型执业类型执业类型
                        </li>
                    </ul>
                </div>
            </div>
        </div>
            <span>推荐报告</span>
        </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "talentPersonnel",
        data() {
            return {
                options: [{
                    value: '选项1',
                    label: '人才姓名'
                }],
                value: '',
                pickerOptions1: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    },
                },
                value1: ''
            }
        },
        methods: {},
        created() {

        }
    }
</script>

<style scoped lang="scss">
    .talentPersonnel {
        box-sizing: border-box;
        width: 100%;
        height: 99%;
        overflow-y:auto;
        position: relative;
        padding: 1% 0 0 1% ;
        display: flex;
        flex-direction: column;
    }
    .title{
        height:33px;
        line-height:33px;
    }
    .lPersonTop {
       padding-left: 30px;
        width: 500px;
        height: 90px;
        display: flex;
        flex-direction: column;
        background-color: #fff;
    }

    .lPersonTop_box {
        display: flex;
        flex-direction: row;
    }

    .lPersonTop_box > span {
        /* flex: 1; */
        font-size: 14px;
        margin-right: 10px;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .lPersonTop_box > span:nth-child(1) {
        font-weight: bold;
    }

    .lPerson > button {
        width: 44px;
        height: 28px;
        border: 1px solid #797979;
        background-color: white;
        border-radius: 4px;
        /* margin-left: 10px; */
    }

    .lselect {
        width: 161px;
    }

    .lpicker{
        position: absolute;
        top:60px;
        right: 15px;
    }

    /*---------------简历----------------------*/
    .lresume {
        width: 98%;
        height:600px;
        margin-left: 1%;
        margin-top: 10px;
        margin-bottom: 20px;
        background-color: #f2f2f2;
        position: relative;
    }
    .lresume > span:nth-child(1) {
        color: #199ed8;
        position: absolute;
        top: 10px;
        right: 10px;
        cursor: pointer;
    }

    .lresume > span:nth-child(2) {
        position: absolute;
        top: 50%;
        right: 50%;
        transform: translate(-50%, -50%);
    }

    .lresume > span:nth-child(3) {
        color: #199ed8;
        position: absolute;
        top: 10px;
        right: 90px;
        cursor: pointer;
    }

    .tab-container{
        flex-grow: 1;
        overflow-y: auto;
        background: #fff;
        padding: 70px 40px;
    }
    .avatar{
                margin-right: 20px;
            }
            .base,.base2{
                >div:not(:last-child){
                    width: 100px;
                    border-right: 1px solid #ccc;
                    line-height: 1;
                    margin: 10px 0;
                }
            }
        
    
</style>
